<template>
	<ph-button 
	@click="onSelect"
	class="ph-drop-item" 
	:icon="multiple?checkicon:icon"
	:icon-right="iconRight"
	:active="checked"
	:align="align"><slot></slot></ph-button>
</template>
<script lang="ts">
    import { computed, defineComponent, inject, Ref} from 'vue'
	import {PhButton} from '../base'
	export default defineComponent({
		props:{
			icon:{
				type:String
			},
			iconRight:{
				type:String
			},
			action:{
				type:String, //item 唯一标识，可以唯空,
				default:""
			}
		},
		setup(props,{emit}){
			const onAction = inject<(k:string,b?:boolean)=>void>('dropdownAction')
			const hide = inject<()=>void>('hide')
			const align = inject<Ref<string>>('align')
			const multiple = inject<Ref<boolean>>("multiple")
			const cacheCheckes = inject<Ref<Array<string>>>("cacheCheckes")
			const checked = computed(()=>{
				return multiple?.value&&cacheCheckes&&cacheCheckes.value.includes(props.action)
			})
			const checkicon = computed(()=>{
				return checked.value?"check-square":"square-o"
			})
			const onSelect = ()=>{
				emit("action",props.action,!checked.value)
				onAction&&onAction(props.action,!checked.value)
				;!multiple?.value&&hide&&hide()
			}
			return {onSelect,align,checkicon,multiple,checked}
		},
		components:{PhButton}
	})
</script>
<style lang="scss">
@import '../../assets/scss/predef.scss';
.ph-drop-item{
	@include bg(var(--ph-dd-bg));
	color: var(--ph-dd-color);
	margin-top: -1px;
	width: 100%;
	padding-left: var(--phx);
	padding-right: var(--phx);
	&:hover{
		@include bg(var(--ph-dd-bg-hover));
		color: var(--ph-dd-color-hover);
	}
	&.ph-action-active{
		color: var(--ph-theme);
	}
}
</style>